import { ref } from 'vue'
import { findTopCategory } from '@/api/category'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

// category
function useCategory () {
  // 全部分类区域
  // 在setup中获取路由参数
  // vue2: this.$route.params/query.id
  // vue3: uweRoute useRoute() -> Route === this.$route

  // 路由缓存机制 -> 组件复用不会重新初始化, 生命周期钩子函数也不会重复执行 -> 导致用来获取数据的函数不会被重复调用(只会在第一次调用一次) -> 导致id变了, 但是请求不会发送, 新数据回不来
  // 解决: 1. 把缓存干掉 2. id变化, 重新执行获取数据的方法

  // 方案一: 干掉缓存 -> 给router-view加key属性
  // 方案二: onBeforeRouterUpdate -> 在路由更新时实行一个回调, 回调中发送想要发送的接口请求

  // 俩种方案如何选择？
  /**
     * 在绝大多数情况 直接使用key简单粗暴的解决就可以了
     * 如果页面中请求数非常多 组件数非常多 强制更新会导致严重的性能问题 此时就使用方案二
     * 避免提前优化 遇到性能问题再尝试解决！！
     */
  const route = useRoute()
  const categoryData = ref({})
  // 如果有实参传入, 就用实参, 没实参传入, 就用默认参数
  // 首次渲染数据使用route.params.id
  // 更新时, 使用传入的to.params.id, 保证id参数始终是最新的
  async function loadCategory (id = route.params.id) {
    const { result } = await findTopCategory(id)
    categoryData.value = result
  }

  loadCategory()

  // 路由更新后执行的回调, 每次路由更新都会执行
  // 在路由更新的时候才会执行, 一上来首次的时候就需要数据 -> 给形参一个默认值
  onBeforeRouteUpdate((to) => {
    // to: 新路由对象
    console.log(to.params.id)
    // 重新发送获取接口数据的请求
    loadCategory(to.params.id)
  })

  return {
    categoryData
  }
}

export default useCategory
